<template>
  <div>
  <el-table
    :data="page.list.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      header-align="center"
      align="center"
      label="照片"
      width="200">
      <template slot-scope="scope">
        {{scope.row.status}}
        <img  :src="scope.row.photopath" width="100">
      </template>
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="名称">
      <template slot-scope="scope">
        <el-link type="primary" @click="detail(scope.row)">{{scope.row.name}}</el-link>
      </template>
    </el-table-column>
    <el-table-column
      prop="produce"
      label="简介">
    </el-table-column>
    <el-table-column
      prop="label.name"
      label="组织类型">
    </el-table-column>
    <el-table-column
      prop="university.name"
      label="学校">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="save(scope.row)"
        :disabled="userUniversityId!=scope.row.universityId"
        >加入部落</el-button>
        <!--<el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
  @size-change="handleSizeChange"
  @current-change="paging"
  :current-page="page.pageNum"
  :page-sizes="[10, 20, 30, 40]"
  :page-size="page.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="page.total">
  </el-pagination>

  <el-dialog title="申请加入部落" :visible.sync="dialogFormVisible" @close="reset">
    <el-form :model="form">
      <el-form-item label="申请原因" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="form.content" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="saveApplication">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
  export default {
    name:"AllTribe",
    data() {
      return {
        search: '',
        pageSize:10,
        name:'',
        page:{list:[]},
        labelId:'',
        universityId:'',
        form:{},
        dialogFormVisible:false,
        formLabelWidth:"100px",
        isUserLoggedIn:false,
        userUniversityId:'',
        

      }
    },
    methods: {
      save(row){
        this.dialogFormVisible=true
        this.form.tribeId=row.id
        this.universityId=row.universityId

      },
      saveApplication(){
        //接收输入信息,信息发送给部落负责人
        this.form.userId=JSON.parse(sessionStorage.getItem("user1")).id
        console.log("this.form",this.form)
        var fd=new FormData
        Object.keys(this.form).forEach(key=>{
          fd.append(key,this.form[key])
        })
        this.$axios.post('tribeMessage/add/',fd).then(resp=>{
          alert(resp.data)
          this.reset()
        })


      },
      reset(){
        this.form={}
        this.dialogFormVisible=false

      },
      //详情:申请创建的活动
      detail(){

      },
      handleSizeChange(pageSize){
        this.pageSize=pageSize
        this.paging(1)
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      paging(curPage){
        // this.universityId=JSON.parse(sessionStorage.getItem("user1")).universityId
        this.$axios.get("tribe/list?curPage="+curPage+"&pageSize="+this.pageSize+ "&name="+this.name+"&labelId="+this.labelId+"&universityId="+this.universityId).then(resp=>{
          this.page=resp.data
          console.log("this.page",this.page)
        })
      },
      
    },
    created() {
      this.paging(1)
      this.userUniversityId=JSON.parse(sessionStorage.getItem("user1")).universityId

    }
  }
</script>
